<template>
    <div class="auditView-box">
        <!-- 审核 -->
        <div class="box-header">
            <h5>
                审核
            </h5>
            <div class="content-box">
                <div class="header-content">
                    <div class="header-title" ref="titleBox">
                        <p :class="{ 'active-title': activeTitle === index }" v-for="(item, index) in headerTitle"
                            :key="index" @click="activeline(index)" ref="titleList">
                            {{ item.txt }}</p>
                        <!-- 下划线 -->
                        <div class="line" ref="line">

                        </div>
                    </div>

                    <div class="box-content">
                        <div class="content-list" v-for="(item, index ) in auditData" :key="index">
                            <div class="list-left">
                                <p class="msg">
                                    {{ item.msg }}
                                </p>
                                <p class="time">
                                    {{ item.time }}
                                </p>
                            </div>

                            <div class="list-right">
                                <p class="status" :class="item.status">{{ item.status }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="linkSee-box">
                        <p class="linkSee">查看更多 <i class="iconfont icon-youjiantou1"></i></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
let activeTitle = ref(0)
let titleBox = ref(null) //盒子
let titleList = ref(null) // 审核标题
let line = ref(null)       // 线
import { getContainerRange } from '@/hook/range/ToContainer.js'
// 元素的位置 以及元素在盒子内的距离
let { getOffsetLeftRelativeToContainer } = getContainerRange()
// 通告数据
let headerTitle = ref([
    {
        txt: '待办项'
    },
    {
        txt: '抄送我'
    },
    {
        txt: '已发起'
    },
    {
        txt: '审核通过'
    },
])
// 审核数据
let auditData = ref([
    {
        msg: '李四发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
    {
        msg: '张三发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
    {
        msg: '王五发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
    {
        msg: '赵六发起的"工单审批"',
        time: '1小时前',
        status: '待处理'
    },
    {
        msg: '孙七发起的"工单审批"',
        time: '俩天前',
        status: '待处理'
    },
    {
        msg: '周八发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
    {
        msg: '吴九发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
    {
        msg: '郑十发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
    {
        msg: '刘一发起的"工单审批"',
        time: '2小时前',
        status: '待处理'
    },
])
// 点击索引标题 激活当前标题的样式 并且把下划线移动到对应标题下面
let activeline = (i) => {
    activeTitle.value = i
    let xLeft = getOffsetLeftRelativeToContainer(titleList.value[i], titleBox.value)
    line.value.style.left = xLeft + 'px'
    switch (i) {
        case 0:
            auditData.value = [{
                msg: '李四发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            },
            {
                msg: '张三发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            },
            {
                msg: '王五发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            },
            {
                msg: '赵六发起的"工单审批"',
                time: '1小时前',
                status: '待处理'
            },
            {
                msg: '孙七发起的"工单审批"',
                time: '俩天前',
                status: '待处理'
            },
            {
                msg: '周八发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            },
            {
                msg: '吴九发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            },
            {
                msg: '郑十发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            },
            {
                msg: '刘一发起的"工单审批"',
                time: '2小时前',
                status: '待处理'
            }]
            break;
        case 1:
            auditData.value = [{
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '1小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '俩天前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            },
            {
                msg: '虾米抄送了"加班申请"',
                time: '2小时前',
                status: ''
            }]
            break;
        case 2:
            auditData.value = [{
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '审核中'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '已驳回'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '1小时前',
                status: '审核通过'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '俩天前',
                status: '审核通过'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '审核中'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '审核中'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '审核中'
            },
            {
                msg: '虾米发起了"打卡补卡"',
                time: '2小时前',
                status: '审核中'
            }]
            break;
        case 3:
            auditData.value = [{
                msg: '李四发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '张三发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '王五发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '赵六发起的"工单审批"',
                time: '1小时前',
                status: '审核通过'
            },
            {
                msg: '孙七发起的"工单审批"',
                time: '俩天前',
                status: '审核通过'
            },
            {
                msg: '周八发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '吴九发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '郑十发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            },
            {
                msg: '刘一发起的"工单审批"',
                time: '2小时前',
                status: '审核通过'
            }]
            break;

        default:
            break;
    }
}

</script>
<style scoped lang='scss'>
// 滚动滑轮
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

*:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 53%, 0.4);
}

*:hover::-webkit-scrollbar-track {
    background: transparent;
}

.auditView-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;

    h5 {
        position: relative;
        font-family: PingFangSC, PingFangSC;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 40px 0;


        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }


    .content-box {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .header-content {
            width: 100%;
            background: #FFFFFF;
            box-shadow: 2px 0px 14px 3px rgba(0, 0, 0, 0.16);
            border-radius: 4px 4px 4px 4px;
            padding-top: 20px;
            box-sizing: border-box;
            height: 100%;
            box-sizing: border-box;
            cursor: pointer;

            .header-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                padding: 0 20px;

                .active-title {
                    color: #1947FF;
                }

                .line {
                    transition: all .5s;
                    position: absolute;
                    bottom: -5px;
                    left: 33px;
                    width: 20px;
                    height: 2px;
                    border-radius: 5px;
                    background-color: #1947FF;
                }
            }

            .box-content {
                height: 400px;
                overflow-y: scroll;
                padding: 0 20px;

                .content-list {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 20px;

                    .list-left {
                        display: flex;
                        flex-direction: column;

                        .msg {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;
                        }

                        .time {
                            font-size: 12px;
                            color: #666;
                        }


                    }



                    .list-right {
                        .status {
                            width: 64px;
                            height: 24px;
                            border-radius: 2px 2px 2px 2px;
                            font-size: 14px;
                            box-sizing: border-box;
                            text-align: center;
                            line-height: 24px;
                        }

                        .审核中 {
                            background: #FCE1C9;
                            color: #FF8C23;
                        }

                        .审核通过 {
                            background: #C4FEC6;
                            color: #069F0B;
                        }

                        .已驳回 {
                            background: #D9D9D9;
                            color: #333333;
                        }
                        .待处理 {
                            background: #fda8a86b;
                            color: #f83f3f;
                        }
                    }
                }
            }

            .linkSee-box {
                width: 100%;
                text-align: right;
                line-height: 40px;
                height: 40px;
                color: #666;
                font-size: 14px;
                border-top: 1px solid #d4d4d4;

            }
        }
    }
}</style>
